<template>
  <div >
    <van-nav-bar
        title="我的"/>
    <div id="center">
       <div class="top">
        <div class="top-center">

          <div class="tup">
            <van-icon name="friends-o" size="50" />
            
          </div>
          <span style="color:#fff;margin-left:10px">立即登录</span>
        </div>
       </div>
       <van-grid class="gird1">
        
        <van-grid-item icon="paid" text="待付款" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="logistics" text="待收货" />
        <van-grid-item icon="photo-o" text="文字" />
      </van-grid>
       <van-grid class="gird1">
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="vip-card-o" text="我的会员卡" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="gold-coin-o" text="我的余额" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="volume-o" text="推广员中心" />
        <van-grid-item icon="photo-o" text="文字" />
      </van-grid>

        <p>由(,,´•ω•)ノ"(´っω•｀。)技术提供</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {}
};
</script>
<style lang="less" scoped>

#center{
  width: 100%;
  height: 600px;
  background: rgba(187, 186, 180, 0.274);
  .gird1{
    margin: 10px;
    border-radius: 20px;
  }
  p{
   text-indent: 20px;
  }
}
.top{
  width: 100%;
  height: 150px;
  background: orange;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .top-center{
    width: 100%;
    height: 70px;
    display: flex;
    // flex-direction: column;
    // justify-content: center;
    align-items: center;
    .tup{
      width: 70px;
      height: 70px;
      margin-left: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      background:cornsilk ;
      border-radius: 50%;
    }
  }
}
</style>
